<template>
  <div class='realTimeBox' :style="lang==='zh'? 'width:900px;':'width:1100px'">
    <div style="height: 30px;">
      <el-divider content-position="left">
        {{$t('配置管理')}}
      </el-divider>
    </div>
    <div class="routerOutBorder">
      <div class="routerOutBorder-title" :style="lang === 'zh' ? 'width: 200px;' : 'width: 250px;'">
        <span>{{$t('配置项')}}</span>
        <svg-icon :icon-class="syncResult === 'enable' ?'synchronous':'no-synchronous'" style="margin-right:5px;font-size: 18px;" />
        <el-select ref="syncResultSelect" v-model="syncResult" :popper-append-to-body="false" size="small" :placeholder="$t('请选择')" @change="(value)=>$emit('valueChange', {key: 'sync', value})" @visible-change="visibleChange" style="width:15px;vertical-align: bottom;">
          <el-option v-for="item in syncResultOption" :key="item.value" :value="item.value" :label="item.label" :id="`ralTime-configure${item.value}`">
            <svg-icon :icon-class="item.iconName" style="margin-right:5px;font-size: 18px;" />
            <span>{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <el-form ref="form" label-position="left" label-width="100px" style="margin:20px auto;" :id="lang==='zh'?'form':'form-en'">
        <el-form-item :label="$t('安全策略')" prop="security" style="width:400px">
          <el-switch class="real-tim-Configure-security" :width="56" v-model="security" @change="$emit('valueChange', {key: 'security', value: security})" active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :class="{'switch-is-actived': security === 'enable'}"></el-switch>
          <el-popover placement="right" :append-to-body="false" :width="lang==='zh'? 430:700" trigger="click" v-if="showPopover">
            <el-row>
              <el-card shadow="never" style="margin-bottom:10px;" :body-style="{padding:'0 36px'}">
                <div class="popover-config">
                  <div>{{$t('本端')}}</div>
                  <el-tooltip :content="$t('配置对比')" placement="top">
                    <div class="realTime-configure-vs" id="realTime-configure-vs" @click="submit">VS</div>
                  </el-tooltip>
                  <div>{{$t('对端')}}</div>
                </div>
              </el-card>
              <el-col :span="8" style="line-height:20px;" v-for="(item, index) of safeList" :key="index">
                <div v-if="contrastList.length">
                  <span v-for="(v, k) of (contrastList||[] )" :key="k":class="modeList[v.moduleName] === modeList[index] ? 'contrastList-show':'contrastList-hide'">≠</span>
                  <span>{{modeList[index] || ''}}</span>
                </div>
                 <div v-else>
                  <span>{{modeList[index] || ''}}</span>
                </div>
              </el-col>
            </el-row>
            <el-button slot="reference" type="primary" icon="el-icon-arrow-right" circle size="mini" style="margin-left:60px;"></el-button>
          </el-popover>
        </el-form-item>
        <el-form-item :label="$t('网络管理')" prop="network" style="width:400px">
          <el-switch :width="56" v-model="network" @change="$emit('valueChange', {key: 'network', value: network})" active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :class="{'switch-is-actived': network === 'enable'}"></el-switch>
          <el-popover placement="right" :width="lang==='zh'? 430:700" trigger="click" v-if="showPopover">
            <el-row>
              <el-card shadow="never" style="margin-bottom:10px;" :body-style="{padding:'0 36px'}">
                <div class="popover-config">
                  <div>{{$t('本端')}}</div>
                  <el-tooltip :content="$t('配置对比')" placement="top">
                    <div class="realTime-configure-vs" id="realTime-configure-vs" @click="submit">VS</div>
                  </el-tooltip>
                  <div>{{$t('对端')}}</div>
                </div>
              </el-card>
              <el-col :span="8" style="line-height:20px;" v-for="(item, index) of netList" :key="index">
                <div v-if="contrastList.length">
                    <span v-for="(v, k) of (contrastList || [])" :key="k" :class="modeList[v.moduleName] === modeList[index] ? 'contrastList-show':'contrastList-hide'">≠</span>
                    <span>{{modeList[index] || ''}}</span>
                </div>
                <div v-else> 
                  <span>{{modeList[index] || ''}}</span>
                </div>
              </el-col>
            </el-row>
            <el-button slot="reference" type="primary" icon="el-icon-arrow-right" circle size="mini" style="margin-left:60px;"></el-button>
          </el-popover>
        </el-form-item>
      </el-form>
      <el-tooltip class="item realTimeIcon" effect="light" :content="$t('网络管理和安全策略：为两个大模块统称，详细模块可在配置项中具体查看，用于配置对比以及实时同步策略')" placement="top">
        <div slot="content">
          <!-- {{$t('配置项放大镜：用于对比两端配置文件MD5是否相同')}}<br /> -->
          {{$t('网络管理和安全策略：为两个大模块统称，详细模块可在配置项中具体查看，用于配置对比以及实时同步策略')}}
        </div>
        <i class="el-icon-info"></i>
      </el-tooltip>
    </div>
    <slot name="start-config"></slot>
    <!-- <el-form ref="form" label-position="left" class="switchStatus" :id="lang==='zh'?'form-status':'form-status-en'"> -->
    <!-- <el-form-item prop="network" style="width:400px">
        <span slot="label">
          {{$t('实时同步')}}
          <i :class="stateColor[stateLight]"></i>
        </span> -->
    <!-- <el-switch :width="lang==='zh'? 45 :55" v-model="syncResult" @change="$emit('valueChange', {key: 'sync', value: syncResult})" active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :class="{'switch-is-actived': syncResult === 'enable'}"></el-switch> -->
    <!-- </el-form-item> -->
    <!-- <el-form-item>
        <el-button id="real-time-configure-btn" type="primary" @click="submit">{{$t('配置对比')}}</el-button>
      </el-form-item> -->
    <!-- </el-form> -->
    <div class="configInfo-info">
      <div style="border: 1px solid #dcdfe6;padding:20px;">
        <div>
          <span class="show-text">{{$t('实时同步：')}}</span>
          <i :class="stateColor[stateLight]"></i>
        </div>
        <div style="margin-top: 12px;">
          <span class="show-text">{{$t('实时同步时间：')}}</span>
          <span>{{(cliConfigList && cliConfigList.length > 0) ?  cliConfigList[0].time:$t('未接收到cli')}}</span>
          <el-link style="margin-left:48px" @click="handleShow">{{moreInfo ? $t('收起'):$t('更多信息')}}</el-link>
        </div>
      </div>
    </div>
    <div class="configInfo" v-show="moreInfo">
      <div v-if="cliConfigList && cliConfigList.length > 0" style="border: 1px solid #dcdfe6;padding:0 20px 20px;text-align:center;">
        <h4>{{$t('上一次接收到cli的时间')}}</h4>
        <div>
          <div v-for="item in cliConfigList" :key="item.time">{{item.time}}</div>
        </div>
      </div>
      <div v-else style="border: 1px solid #dcdfe6;padding:20px;text-align:center;">
        {{$t('未接收到cli')}}
      </div>
    </div>
    <!-- <el-dialog :close-on-click-modal='false' v-drag :title="$t('配置差异')" :v-if="dialogVisible" :visible.sync="dialogVisible" top="20vh" width="450px" @close='close'>
      <div class="dialogContentBoxMaxHeight60">
        <el-table size='mini' ref="multipleTable" :data="contrastList" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="id" label="ID" align='center' min-width="60"></el-table-column>
          <el-table-column prop="moduleName" :label="$t('模块名称')" align='center' min-width="120">
            <template slot-scope="scope">
              {{modeList[scope.row.moduleName]}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">{{$t('关 闭')}}</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>
<script>
import {
  showMode,
  showConfigure,
  hotContrast,
  setSNStatus,
  getConfigureSendStatus
} from '@/api/network/highAvailability/hotMachine'
import { getMgmtMode } from '@/api/system/log'
export default {
  name: 'RealTimeConfigure',
  data () {
    return {
      lang: this.$i18n.locale,
      dialogVisible: false,
      network: 'disable',
      security: 'disable',
      netList: [],
      safeList: [],
      contrastList: [],
      modeList: {},
      syncResult: 'disable',
      syncResultOption:[
        {
          value:"enable",
          label:this.$t('实时同步'),
          iconName:'synchronous',
          showLabel:'<svg-icon icon-class="synchronous" style="margin-right:5px;" />'
        },
        {
          value:"disable",
          label:this.$t('不同步'),
          iconName:'no-synchronous',
          showLabel:'<svg-icon icon-class="synchronous" style="margin-right:5px;" />'
        }
      ],
      stateLight: '0',
      timer: null,
      timerCli: null,
      cliConfigList: [],
      stateColor: {
        '0': 'el-icon-error red',
        '1': 'el-icon-success green'
      },
      showPopover: false,
      showPopoverConfig: false,
      moreInfo:false
    }
  },
  beforeDestroy () {
    this.configureStatus('stop')
    if (this.timerCli) {
      clearInterval(this.timerCli) // 在Vue实例销毁前，清除我们的定时器
      this.timerCli = null
    }
  },
  methods: {
    init (data) {
      if (data) {
        this.syncResult = data.sync
        if (this.syncResult === 'enable') {
          this.configureStatus('start')
          if (!this.timer) {
            this.timer = setInterval(() => {
              this.configureStatus('start')
            }, 3000)
          }
        } else {
          this.configureStatus('stop')
          this.stateLight = '0'
        }
        this.network = data.network
        this.security = data.security
      }
      showMode().then(res => {
        const netList = res.info[1].config
        const safeList = res.info[0].config
        for(const k in netList) {
          console.log(k)
          console.log(netList[k])
          console.log(netList[k].attributes)
          if(netList[k].attributes !== 'sync') {
            delete netList[k]
          }
        }
        this.netList = netList;
        for(const k in safeList) {       
          console.log(k)
          console.log(safeList[k])
          console.log(safeList[k].attributes)
          if(safeList[k].attributes !== 'sync') {
            delete safeList[k]
          }
        }
        this.safeList = safeList
        this.showPopover = true
      })
      getMgmtMode().then(res => {
        this.modeList = {}
        for (let item of res.info) {
          this.modeList[item.name] = item.chinese_name
        }
      })
      showConfigure().then(res => {
        this.cliConfigList = res.info
      })
      if (!this.timerCli) {
        this.timerCli = setInterval(() => {
          showConfigure().then(res => {
            this.cliConfigList = res.info
          })
        }, 3000)
      }
    },
    visibleChange(value) {
      console.log(value)
    },
    handleShow() {
      this.moreInfo = !this.moreInfo;
    },
    submit () {
      hotContrast().then(res => {
        this.$messages.success(res.msg)
        if (res.info && res.info.length > 0) {
          this.contrastList = res.info
          this.dialogVisible = true
        }
      })
    },
    configureStatus (status) {
      if (status === 'start') {
        getConfigureSendStatus().then(res => {
          this.stateLight = res.info.length > 0 ? res.info[0].syncResult : '0'
        })
      } else if (status === 'stop') {
        if (this.timer) {
          clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
          this.timer = null
        }
      }
    },
    SNSstausChange () {
      setSNStatus({security: this.security, network: this.network})
    },
    close () {
      this.dialogVisible = false
      this.contrastList = []
    }
  }
}
</script>
<style lang="scss" scoped>
.popover-config {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  font-weight: 700;
  .realTime-configure-vs {
    font-size: 16px;
    color: #1296db;
  }
  .realTime-configure-vs:hover {
    cursor: pointer;
    text-decoration: underline;
  }
}
.contrastList-show {
  display: inline-block;
  width: 7px;
  color: red;
}

.contrastList-hide {
  display: none;
}
.realTimeBox {
  padding: 0 30px;
  .el-divider__text {
    font-size: 20px;
  }
  .el-divider {
    margin: 40px 0;
  }
  #form {
    .el-switch {
      margin-left: 15px;
      /deep/ .el-switch__core {
        &::before {
          content: "关闭";
          color: #fff;
          position: absolute;
          // font-size: 14px;
          transform: scale(0.85);
          left: 18px;
        }
      }
      &.switch-is-actived {
        /deep/ .el-switch__core {
          &::before {
            content: "开启";
            left: 7px;
            transform: scale(0.85);
          }
        }
      }
    }
  }
  #form-en {
    .el-switch {
      margin-left: 15px;
      /deep/ .el-switch__core {
        &::before {
          content: "close";
          color: #fff;
          position: absolute;
          // font-size: 14px;
          transform: scale(0.85);
          left: 18px;
        }
      }
      &.switch-is-actived {
        /deep/ .el-switch__core {
          &::before {
            content: "open";
            left: 7px;
            transform: scale(0.85);
          }
        }
      }
    }
  }
}
#form-status {
  .el-switch {
    margin-left: 10px;
    /deep/ .el-switch__core {
      &::before {
        content: "关";
        color: #fff;
        position: absolute;
        // font-size: 14px;
        transform: scale(0.85);
        left: 22px;
      }
    }
    &.switch-is-actived {
      /deep/ .el-switch__core {
        &::before {
          content: "开";
          left: 8px;
          transform: scale(0.85);
        }
      }
    }
  }
}
#form-status-en {
  .el-switch {
    margin-left: 10px;
    /deep/ .el-switch__core {
      &::before {
        content: "close";
        color: #fff;
        position: absolute;
        // font-size: 14px;
        transform: scale(0.85);
        left: 22px;
      }
    }
    &.switch-is-actived {
      /deep/ .el-switch__core {
        &::before {
          content: "open";
          left: 8px;
          transform: scale(0.85);
        }
      }
    }
  }
}
.switchStatus {
  width: 100%;
  margin-top: 20px;
  .el-form-item {
    padding: 0 20px;
  }
}
.green {
  font-size: 12px;
  color: #8fc31f;
  margin-top: -10px;
}
.red {
  font-size: 12px;
  color: red;
  margin-top: -10px;
}
.configInfo {
  text-align: center;
  margin: 30px 0;
}
.configInfo-info {
  margin: 20px 0;
  .show-text {
    color: #606266;
    font-weight: 700;
    font-size: 12px;
  }
}
.routerOutBorder {
  position: relative;
  margin-top: 20px;
  border: 1px solid #dcdfe6;
  padding: 0 30px;
  .el-select-dropdown__item {
    text-align: left !important;
  }
}
.routerOutBorder-title {
  height: 30px;
  line-height: 30px;
  background: white;
  text-align: center;
  margin-top: -16px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 500;
  color: #303133;
  /deep/ input {
    display: none;
  }
}
.realTimeIcon {
  color: #e6a23c;
  font-size: 16px;
  position: absolute;
  right: -20px;
  top: 1px;
}
</style>